<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 先引入 Vue -->
   <script src="https://unpkg.com/vue/dist/vue.js"></script>
   <!-- 引入组件库 -->
   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title></title>
  </head>
  <style media="screen">
  .wrap1 {
    width: 500px;
    border: 1px solid #000;
    margin: 50px auto;
  }
  .banner{
    height: 150px;
    background: #e8e8e8;
  }
  .top1{
    width: 100%;
    height:50px;
    text-align: center;
    font-size: 15px;
    line-height: 50px;
  }
  .nr{
    width: 100%;
    height: 200px;
    background: #ccc;
    overflow: hidden;

  }
  .nr1{
    width: 50%;
    height: 100%;
    float: left;
    text-align: center;
  }
  .nr2{
    width: 50%;
    height: 100%;
    float: left;
    background: red;
  }
  .imgnr{
    width: 100%;
    height: 300px;
    background: #3c3c3c;
  }
  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
  </style>
  <body>
  <div id="app">
    <div class="wrap1">
        <div class="top1">
            活动一
        </div>
        <div class="banner">
          <div class="block">
              <el-carousel height="150px">
                <el-carousel-item >
                  <img style="width:100%" src="http://59.110.53.232:8080//JiaYinNEW/headUpload/000000000ea566417ef064dd9a911096bfeba6e4f.jpg" alt="">
                </el-carousel-item>
                <el-carousel-item >
                  <img style="width:100%" src="http://59.110.53.232:8080//JiaYinNEW/headUpload/000000000ea566417ef064dd9a911096bfeba6e4f.jpg" alt="">

                </el-carousel-item>
                <el-carousel-item >
                  <img style="width:100%" src="http://59.110.53.232:8080//JiaYinNEW/headUpload/000000000ea566417ef064dd9a911096bfeba6e4f.jpg" alt="">

                </el-carousel-item>
              </el-carousel>
            </div>
        </div>
        <div class="nr">
          <div class="nr1">
            <img style="width:100%" src="http://59.110.53.232:8080//JiaYinNEW/headUpload/000000000ea566417ef064dd9a911096bfeba6e4f.jpg" alt="">
          </div>
          <div class="nr2">

          </div>
        </div>
        <div class="imgnr">
          <img style="width:100%" src="http://59.110.53.232:8080//JiaYinNEW/headUpload/000000000ea566417ef064dd9a911096bfeba6e4f.jpg" alt="">
        </div>
    </div>
    <div class="">

    </div>
  </div>
  </body>

 <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>

</html>
